<template>
    <div>
        <el-form ref="editForm" :model="formFileds">
            <el-row :gutter="24">

                <el-col :span="12">
                    <el-form-item>
                        <el-input></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item>
                        <el-button type="primary">
                            查询
                        </el-button>

                        <el-button type="primary" @click="add()">
                            增加
                        </el-button>

                        <el-button type="primary" >
                            批量删除
                        </el-button>

                    </el-form-item>
                </el-col>

            </el-row>


        </el-form>
        <!--表格内容-->
        <el-table ref="list" :data="tableData" style="width: 100%;margin-bottom: 5=1px;" border 
            highlight-current-row :default-sort="{ prop: 'date', order: 'descending' }">
            <el-table-column fixed type="selection" width="45">
            </el-table-column>
            <el-table-column property="name" label="模块ID" align="center">
            </el-table-column>
            <el-table-column property="moduleName" label="模块名称" align="center">
            </el-table-column>
            <el-table-column property="description" label="模块描述" align="center">
            </el-table-column>
            <el-table-column property="route" label="跳转路径" align="center">
            </el-table-column>
            <el-table-column property="moduleStatus" label="模块状态" align="center">
            </el-table-column>
            <el-table-column property="creationTime" label="创建时间" align="center">
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center">
                <template slot-scope="scope">
                    <el-button circle icon="el-icon-edit-outline" type="primary" @click="Edit()" title="编辑"
                        size="small">
                    </el-button>
                    <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
                        @click="rowDel(scope.$index, scope.row, $event)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination :page-sizes="[10, 20, 30, 40, 100]" :page-size="10" :total="100"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

        <add v-if="isShowAddDialog" :isShowAddDialog="isShowAddDialog" @dialogClose="dialogClose"></add>
        <Edit v-if="isShowEditDialog" :isShowEditDialog="isShowEditDialog" @dialogClose="dialogClose"></Edit>
    </div>
</template>
     
<script>
import add from "./moduleManageAdd.vue"
import Edit from "./moduleManageEdit.vue"
export default {
    name: "Table",
    components: {
        add,
        Edit
    },
    data() {
        return {
            formFileds: {
            },
            tableData: [
                {
                    index: 0,
                    name: "1",
                    moduleName: "机动车鉴定评估",
                    description: "",
                    route: "http://xxxxxxx",
                    moduleStatus: "正常",
                    creationTime: "2022-10-02 12:00",
                },
                {
                    index: 0,
                    name: "2",
                    moduleName: "价格鉴证",
                    description: "",
                    route: "",
                    moduleStatus: "禁用",
                    creationTime: "2022-10-02 12:00",
                },
                {
                    index: 0,
                    name: "3",
                    moduleName: "保险公估",
                    description: "",
                    route: "",
                    moduleStatus: "正常",
                    creationTime: "2022-10-02 12:00",
                },
                {
                    index: 0,
                    name: "4",
                    moduleName: "资产评估",
                    description: "",
                    route: "",
                    moduleStatus: "禁用",
                    creationTime: "2022-10-02 12:00",
                },
            ],
            isShowAddDialog:false,
            isShowEditDialog:false,
        } 
    },
    methods: {
        rowEdit(row) {
            // //当前选中行
            this.formFileds = row;
        },
        dialogClose(){
            this.isShowAddDialog = false;
            this.isShowEditDialog = false;
        },
        add() {
            this.isShowAddDialog = true;
        },
        Edit() {
            this.isShowEditDialog = true;
        },
        handleEdit(id) {
            this.$refs.editForm.validate(isValid => {

                if (!isValid) return;

                // 保存编辑后的数据
                Object.assign(this.tableData[id], this.formFileds);
                this.isShowEditDialog = false;

                // 考虑到可能编辑了日期-需要重新排序
                // ***注意：手动排序传参和表格的default-sort属性格式不太一样
                this.$refs.list.sort('date', 'descending');

                this.$message.success('编辑成功');
            });
        },
        rowDel(row, event) {

            // 让当前删除按钮失焦
            // event.target.blur();

            this.$confirm('您确定要删除该模块吗？', '删除', {
                comfirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {

                this.tableData.splice(row.id, 1);
                this.$message.success('删除成功');
                return false;
            });
        },
        // 选中当前行-当前行的复选框被勾选
        setCurRowChecked(row) {

            this.$refs.list.clearSelection();
            this.$refs.list.toggleRowSelection(row);
        }
    }
}
</script>
    
<style scoped lang="less">
.el-form {
    padding: 0 10px;
}

.el-date-editor {
    width: 100% !important;
}
</style>
    